<template>
  <div class="gongsi">
    <h2>雅阁.汇科技整装</h2>
    <h4>一家致力于科技装饰的全案服务公司</h4>
    <img src="/src/assets/img/about/gs001.png" alt="" />
    <h3>公司简介</h3>
    <p>
      雅阁汇装饰公司成立于2000年，拥有23年行业资历在绵阳分别设有总部、涪城店、经开店、永兴店、旗舰店。为每年1000多位业主提供专业细致的装修服务。拥有建筑装饰装修工程专业二级施工资质企业，与绵阳市建筑装饰协会共同奋进20余载。荣获绵阳市建筑装饰协会授予“标杆企业”称号。
    </p>
    <div class="gs_box">
      <img src="/src/assets/img/about/gs002.jpg" alt="" />
      <div class="gs_bottom">
        <p class="title">汇川团队服务理念</p>
        <div class="xian"><p></p></div>
        <p>客户满意是我们的标准</p>
        <p>客户感动是我们的目标</p>
      </div>
    </div>
  </div>
  <div class="hexins">
    <div class="top1">
      <div class="title">汇川团队核心标准</div>
      <p class="xian"></p>
      <div class="text">
        <br />
        让所有选择雅阁汇的业主享受真爱幸福家
        <br />
        <br />
        我们一次合作一生朋友
        <br />
        我们一定坚持做一个激情付出有.....
      </div>
    </div>
    <div class="padding5">
      <div class="title">核心价值观</div>
      <p class="xian"></p>
    </div>
    <swiper :loop="true" slidesPerView="auto" :space-between="20">
      <swiper-slide>
        <img src="/src/assets/img/about/hxslid1.jpg" alt="" srcset="" />
        <p>奋斗</p>
      </swiper-slide>
      <swiper-slide>
        <img src="/src/assets/img/about/hxslid1.jpg" alt="" srcset="" />
        <p>创新</p>
      </swiper-slide>
      <swiper-slide>
        <img src="/src/assets/img/about/hxslid1.jpg" alt="" srcset="" />
        <p>共赢</p>
      </swiper-slide>
      <swiper-slide>
        <img src="/src/assets/img/about/hxslid1.jpg" alt="" srcset="" />
        <p>诚信</p>
      </swiper-slide>
      <swiper-slide>
        <img src="/src/assets/img/about/hxslid1.jpg" alt="" srcset="" />
        <p>感恩</p>
      </swiper-slide>
    </swiper>
    <div class="zhengtu">
      <div class="padding5">
        <h2>发展历程</h2>
        <h4>一家致力于科技装饰的全案服务公司</h4>
      </div>
      <div class="conList">
        <p class="title">2023</p>
        <p>雅阁汇装饰正式成立，披荆斩棘，砥砺前行</p>
      </div>
      <div class="conList">
        <p class="title">2023</p>
        <p>雅阁汇装饰正式成立，披荆斩棘，砥砺前行</p>
      </div>
      <div class="conList">
        <p class="title">2023</p>
        <p>雅阁汇装饰正式成立，披荆斩棘，砥砺前行</p>
      </div>
    </div>
    <div class="jiangli">
      <div class="padding5">
        <h2>荣获奖项</h2>
        <h4>业主的满意，是对我们最好的肯定</h4>
      </div>
      <div class="swipers">
        <div class="title">荣誉资质</div>
        <p>匠心与精耕让我们走在行业发展前沿</p>
        <swiper
          :effect="'coverflow'"
          :grabCursor="true"
          :centeredSlides="true"
          :slidesPerView="3"
          :navigation="navigation"
          loop="true"
          :coverflowEffect="coverflowEffect"
          :modules="modules"
          class="mySwiper"
        >
          <swiper-slide
            ><img
              src="https://www.shbotao.net//uploads/allimg/20211209/6ee4d8b6bbe78cd87babb6a4f8f6d5fc.jpg"
          /></swiper-slide>
          <swiper-slide
            ><img
              src="https://www.shbotao.net//uploads/allimg/20211209/6ee4d8b6bbe78cd87babb6a4f8f6d5fc.jpg"
          /></swiper-slide>
          <swiper-slide
            ><img
              src="https://www.shbotao.net//uploads/allimg/20211209/6ee4d8b6bbe78cd87babb6a4f8f6d5fc.jpg"
          /></swiper-slide>
          <swiper-slide
            ><img
              src="https://www.shbotao.net//uploads/allimg/20211209/6ee4d8b6bbe78cd87babb6a4f8f6d5fc.jpg"
          /></swiper-slide>
          <swiper-slide
            ><img
              src="https://www.shbotao.net//uploads/allimg/20211209/6ee4d8b6bbe78cd87babb6a4f8f6d5fc.jpg"
          /></swiper-slide>
          <swiper-slide
            ><img
              src="https://www.shbotao.net//uploads/allimg/20211209/6ee4d8b6bbe78cd87babb6a4f8f6d5fc.jpg"
          /></swiper-slide>
          <swiper-slide
            ><img
              src="https://www.shbotao.net//uploads/allimg/20211209/6ee4d8b6bbe78cd87babb6a4f8f6d5fc.jpg"
          /></swiper-slide>
          <swiper-slide
            ><img
              src="https://www.shbotao.net//uploads/allimg/20211209/6ee4d8b6bbe78cd87babb6a4f8f6d5fc.jpg"
          /></swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/effect-coverflow'
import { ref } from 'vue'
import { EffectCoverflow, Navigation } from 'swiper/modules'
const modules = ref([EffectCoverflow, Navigation])
const coverflowEffect = ref({
  rotate: 50,
  stretch: 0,
  depth: 100,
  modifier: 1,
  slideShadows: true
})
</script>

<style>

.swipers p{
    font-size: 0.28rem;
}
.hexins .zhengtu {
  background: url(/src/assets/img/about/hxzt.png) no-repeat;
  background-size: 100% 100%;
  height: 12rem;
  margin: 1rem 0;
}
.hexins .zhengtu .conList {
  font-size: 0.28rem;
}
.hexins .zhengtu .conList .title {
  font-size: 0.32rem;
}
.hexins .zhengtu .conList:nth-child(2) {
  width: 45%;
  margin-top: 2.2rem;
  margin-left: 4rem;
}
.hexins .zhengtu .conList:nth-child(3) {
  width: 46%;
  margin-top: 1.6rem;
  text-align: right;
}
.hexins .zhengtu .conList:nth-child(4) {
  margin-top: 2rem;
  margin-left: 1.3rem;
  width: 5rem;
}
.padding5 {
  padding: 0.5rem;
}
.hexins .top1 {
  background: url(/src/assets/img/about/hx001.jpg) no-repeat;
  background-size: cover;
  font-size: 0.3rem;
  color: #fff;
  padding: 0.5rem 0.5rem 0.8rem;
}
.hexins .title {
  font-size: 0.36rem;
}
.hexins .xian {
  width: 1.7rem;
  height: 0.04rem;
  background: #dd292c;
}
.hexins .swiper .swiper-slide {
  width: 70%;
}
.hexins .swiper .swiper-slide p {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  font-size: 0.36rem;
  color: #fff;
}
.gongsi {
  padding: 0.5rem 0.4rem;
}
h2 {
  font-size: 0.46rem;
  font-weight: 700;
}
h3 {
  font-size: 0.36rem;
}
h4 {
  font-size: 0.32rem;
  color: #999;
  padding: 0.1rem 0 0.5rem;
}
.gongsi > img {
  width: 100%;
}
.gongsi > p {
  font-size: 0.28rem;
  color: #333333;
  padding: 0.5rem 0;
}
.gongsi .gs_box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gongsi .gs_box img {
  width: 3rem;
}
.gongsi .gs_box .gs_bottom {
  width: 5rem;
  color: #fff;
  background: rgb(0, 0, 0, 0.7);
  font-size: 0.3rem;
  margin-left: -1rem;
  padding: 0.3rem 0.5rem;
}
.gongsi .gs_box .gs_bottom .title {
  font-size: 0.36rem;
}
.gongsi .gs_box .gs_bottom .xian {
  height: 0.01rem;
  background: #a0a0a0;
  margin: 0.2rem 0;
  position: relative;
}
.gongsi .gs_box .gs_bottom .xian p {
  height: 0.06rem;
  width: 1rem;
  background: #ccc;
  position: absolute;
  top: -0.01rem;
}
.swipers{
    padding: 0.3rem;
    text-align: center;
    background: url(/src/assets/img/about/hong-004.png);
    background-size: cover;
    color: #fff;
}
.swipers .title {
    font-size: 0.46rem;
    margin-top: 0.5rem;
}
.swipers > p{
    padding: 0.36rem;
}
</style>